<template>
    <div class="login">
        <!--<pre v-text="$attrs"/>-->
      <!--<el-button @click="sendMessage">{{btnName}}</el-button>-->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>用户登录</span>
        </div>
        <div style="margin:auto; width:400px;">
          <el-main>
            <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="formLabelAlign.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="formLabelAlign.password"></el-input>
              </el-form-item>
              <el-button type="primary" @click="regist" style="float:right;margin-right: 10px">注册</el-button>
              <el-button type="primary" @click="login" style="float:right;margin-right:10px">登录</el-button>
            </el-form>
          </el-main>
        </div>
      </el-card>
    </div>
</template>

<script>
    import axios from "../../plugins/axios";

    export default {
      head(){
        return {
          title:'用户登录'
        }
      },
      data: function() {
        return {
          labelPosition: 'right',
          formLabelAlign: {
            username: '',
            password: ''
          }
        }
      },
      methods:{
        login: function () {
          let that = this;
          let url = "login?username="+that.formLabelAlign.username+"&password="+that.formLabelAlign.password;
          axios.post(url)
            .then(function (response) {
              if(response.data.code==203){
                localStorage.setItem("token",response.data.jwtToken)
                that.$message({
                  message: '登录成功',
                  type: 'success',
                  center: true,
                  onClose: function () {
                    that.$router.push({path:'/personList/personList'})
                  },
                  showClose:true
                });
              }else{
                that.$message({
                  message: response.data.message,
                  type: 'error',
                  center: true,
                  showClose:true
                });
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        regist: function(){
          this.$router.push("/regist/regist")
        }
      }
    };
</script>
<style>

  .box-card {
    margin:100px auto;
    width: 480px;
  }
</style>
